<template>
    <AppHeader :title="moduleTypeName" :banAnimate="true" backgroundColor="#ffffff">
      <template #left>
        <img
          @click="onClickLeft"
          src="@/assets/images/icon-back-black.png"
          width="9"
          height="18"
        />
      </template>
      <template #right>
        <img
          @click="onClickRight"
          src="@/assets/images/listening/copy.png"
          width="18"
          height="18"
        />
      </template>
    </AppHeader>
    <div class="container">
        <div class="container-text" v-for="(item,index) in pareList" :key="index" v-show="index === active">
          <span v-html="item.stem" />
        </div>
      <!-- <div class="btns">
        <div class="btn" @click="prevclick">
          <van-button type="default" block round >上一题</van-button>
        </div>
        <div class="btn" @click="nextclick">
          <van-button type="primary" block round color="linear-gradient( 270deg, #29F19C 0%, #02A1F9 100%)">下一题</van-button>
        </div>
      </div> -->
    </div>
</template>

<script setup>
import { Slider, Overlay } from "vant";
import AppHeader from "@/components/AppHeader.vue";
import { useRouter ,useRoute} from "vue-router";
import { onMounted ,ref ,onBeforeUnmount} from "vue";
const router = useRouter();
const route = useRoute();

const onClickLeft = () => {
  router.back();
};
const resourceObj = ref({})
const moduleTypeName = ref('')
const pareList = ref([])
const onClickRight = () => { 
  router.push('/written/singleTest')
}
const active = ref(0);
onMounted(()=>{
  resourceObj.value = JSON.parse(sessionStorage.getItem('resource'))
  pareList.value = resourceObj.value.parts.find(item => item.sid == route.query.sid).children
  moduleTypeName.value = JSON.parse(sessionStorage.getItem('resource')).parts.find(item=>item.sid == route.query.sid).module_type_name
  JSON.parse(sessionStorage.getItem('resource')).parts.forEach(item=>{
      if(item.children.length > 0){
        item.children.forEach(child=>{
          if(child.sid === route.query.sid *1){
            obj = child.qtype
          }
        })
      }else{
        if(item.sid === route.query.sid *1){
          obj = item.qtype
        }
      }
  })
})
const prevclick = () => { 

}
const nextclick = () => { 
  router.push('/writtenTest/singleSubmit')
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  background-color: #ffffff;
  padding-top: 44px;
  padding-bottom: 100px;
  overflow: scroll;
  .practice-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;

        // margin: 0 12px;
        // margin-top: 15px;
        .practice-top-currentPage {
            font-size: 16px;
            color: #0CB76C;

            span {
                color: #8E8E8E;
            }
        }

        .practice-top-slider {
            min-width: 234px;
            flex: 1;
            margin: 0 10px;
        }
    }

    .container-text {
        padding: 15px 10px;
        font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 16px;
color: #333333;
line-height: 32px;
text-align: left;
font-style: normal;
    }
 .swiper-list{
  .list-item{
    padding: 0 15px;
    .title{
      font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 18px;
color: #333333;
line-height: 25px;
text-align: left;
font-style: normal;
    }
    .option{
      margin: 15px 0;
      .checked{
        background: #0CB76C;
        color: #ffffff;
      }
      .unchecked{
        display:inline-block;
        width: 30px;
height: 30px;
border: 1px solid #0CB76C;
border-radius: 50%;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 16px;
color: #0CB76C;
text-align: left;
font-style: normal;
text-align: center;
line-height: 28px;
      }
      .option-item{
        font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 18px;
color: #8E8E8E;
line-height: 25px;
text-align: left;
font-style: normal;
margin-left: 15px;
      }
    }
  }
 }
 .btns{
  display: flex;
    padding: 30px 10px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    .btn{
      flex:1;
      &:first-child{
        margin-right: 15px;
      }
    }
 }
}
::v-deep .van-slider__button {
    display: none !important;
}
</style>
